<script>

  function loadRoots() {
    $.ajax(
        {
          url: '?listGen&act=lsr',
          type: 'post',
          data: {sectionId: $('#sectionId').val()},
          beforeSend: function(){
            $('#loading').show();
          }
        }
    ).done(function (response) {
          $("#listRoots").html(response);
          $("#rootTitle").show();
          $('#listRoot').on('change', function () {
            loadSubs();
            $('#subTitle').show();
          });
          $('#loading').hide();
        })
  }

  function loadSubs() {
    $.ajax(
        {
          url: '?listGen&act=lss',
          type: 'post',
          data: {listRoot: $('#listRoot').val()},
          beforeSend: function(){
            $('#loading').show();
          }
        }
    ).done(function (response) {
          $("#subRoots").html(response);
          $('#listSub').on('change', function () {
            $('#editSubTitle').show();
          });
          loadProducts();
          $('loading').hide();
        })
  }


  function loadProducts() {
    $.ajax(
        {
          url: '?lP',
          type: 'post',
          data: {listSubId: $('#listSub').val(), sectionId: $('#sectionId').val()},
          beforeSend: function(){
            $('#loading').show();
          }
        }
    ).done(function (response) {
          $("#productsDiv").html(response);
          $('#loading').hide();
        })
  }
</script>
<?php
/**
 * Created by PhpStorm.
 * User: Aliaksei Lazerka
 * Date: 10/24/14
 * Time: 1:11 PM
 */


$result = getMainCategories();

$output = "<select id='sectionId' name='sectionId' onchange='loadRoots()'>";

while ($row = mysql_fetch_assoc($result)) {
  $output .= "<option value='" . $row['ID'] . "'>" . $row['TITLE'] . "</option>";
}

$output .= "</select>";

?>

<form method="post" action="?eLS" id="subEditForm">
  <div class="step">
    <div class="stepInfo">
      1. Выберите категорию, в которой находится корневой элемент списка:
    </div>
    <div class="stepSelect"><?= $output ?></div>
  </div>
  <div class="step" id="rootTitle">
    <div class="stepInfo">
      2. Выберите корневой элемент списка, в который Вы хотите добавить новый элемент второго уровня:
    </div>
    <div class="stepSelect">
      <div id="listRoots">
      </div>
    </div>
  </div>
  <div class="step" id="subTitle">
    <div class="stepInfo">
      3. Выберите элемент списка второго уровня, продукцию которого Вы хотите изменить/удалить:
    </div>
    <div class="stepSelect">
      <div id="subRoots">
      </div>
    </div>
  </div>
  <div class="step" id="editSubTitle">
    <!--    <input type="text" name="newSubTitle" id="newSubTitleInput">-->
    <!--    <input type="button" value="Изменить" onclick="submitSubEditForm('edit')">-->
    <div class="stepSelect">
      <div id="productsDiv">
      </div>
    </div>
  </div>
</form>